<template>
  <div>
    <el-upload
      v-if="limit"
      :accept="accept"
      :action="uploading_api"
      :headers="uploading_img.headers"
      :limit="limit"
      :file-list="formattedFileList"
      :multiple="multiple"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :show-file-list="true"
      :list-type="listType"
      :on-preview="handlePreview"
    >
      <el-button v-if="listType == 'text'" size="small" type="primary">
        点击上传
      </el-button>

      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <!-- <div class="files" v-if="listType == 'picture-card'">
      <div class="file_upload_tip">
        只能上传 {{ accept }} 文件，且不超过500kb
      </div>
      <el-image
        v-for="item in formattedFileList"
        :key="item.url"
        style="width: 50px; height: 50px"
        :src="item.url"
        fit="cover"
      ></el-image>
    </div> -->

    <!-- <div class="files" v-if="listType == 'text'">
      <div class="file_upload_tip">
        只能上传 {{ accept }} 文件，且不超过500kb
      </div>
      <a
        class="ellipsis file custom-link"
        v-for="item in formattedFileList"
        @click="openNewPage(item.url)"
        :key="item.url"
        >{{ item.url }}</a
      >
    </div> -->
  </div>
</template>

<script>
import {
  getUploadingImgUrl,
  getUploadingVideoUrl,
  getResourceUrl,
} from "@/api/uploading";
import { getToken } from "@/utils/auth";
export default {
  props: {
    listType: {
      type: String,
      default: "text",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1,
    },
    fileList: {
      type: String,
      default: () => "",
    },
    accept: {
      type: String,
      default: () => ".jpg,.png",
    },
    accept_type: {
      type: String,
      default: () => "img",
    },
  },
  data() {
    return {
      uploading_img: {
        headers: {},
        api_uploading_img_url: "",
        api_uploading_video_url: "",
        dialogImageUrl: "",
        dialogImgVisible: false,
        disabled: false,
      },
    };
  },
  computed: {
    uploading_api() {
      // console.log(this.accept_type,'===========')
      if (this.accept_type == "img") {
        console.log( getUploadingImgUrl(),'========')
        return getUploadingImgUrl();
      } else if (this.accept_type == "video") {
        return getUploadingVideoUrl();
      }
      return "";
    },
    formattedFileList() {
      //   console.log("formattedFileList", this.fileList);
      var data = this.fileList
        ? this.fileList.split(",").map((file) => ({
            name: file.trim(),
            response: {
              code: 1,
              data: {
                path: file.trim(),
              },
            },
            url: getResourceUrl(file.trim()), // 假设每个文件名也是其 URL
          }))
        : [];
      return data;
    },
  },

  created() {
    this.uploading_img.api_uploading_img_url = getUploadingImgUrl();
    this.uploading_img.api_uploading_video_url = getUploadingVideoUrl();
    this.uploading_img.headers = {
      token: getToken(),
    };
  },
  methods: {
    openNewPage(url) {
      // 在这里指定要打开的新页面 URL
      window.open(url, "_blank"); // 使用 _blank 打开新标签页
    },
    handleSuccess(response, file, fileList) {
      console.log("上传成功图片", fileList);
      const _this = this;
      var files = this.handleUploadingImgFileList(fileList);

      this.$emit("upload-success", files); // 向父组件传递图片 URL
    },
    // 上传失败
    handleError(response, file, fileList) {
      console.log([response, file, fileList], "上传失败");
    },
    // 文件查看
    handlePreview(file) {
      console.log(file, "文件查看");
      window.open(file["url"], "_blank");
    },
    handleRemove(file, fileList) {
      console.log("删除图片", fileList);
      var files = this.handleUploadingImgFileList(fileList);
      this.$emit("upload-success", files); // 向父组件传递图片 URL
    },
    // 处理上传图片列表
    handleUploadingImgFileList(fileList) {
      var files = [];
      for (var f = 0; f < fileList.length; f++) {
        var response = fileList[f]["response"];
        if (response["code"] == 1) {
          files.push(response["data"]["path"]);
        }
      }
      return files;
    },
  },
};
</script>




<style lang="scss">
.file_upload_tip {
  padding: 12px 0px;
  font-size: 12px;
  color: #bdbdbd;
  line-height: 12px;
}

.files {
  .file {
    line-height: 22px;
    font-size: 12px;
    width: 400px;
    // color: #bdbdbd;
  }
}
</style>
